<template>
  <view class="setting-container">
		<cell label="语言切换" arrow @onFormat="onLang"></cell>
		<cell label="资料格式化" arrow @onFormat="show=true"></cell>
		<cell label="恢复出厂设置" arrow @onFormat="showRest=true"></cell>


		<tn-popup v-model="show" mode="bottom" borderRadius="50">
      <view class="pop-modal">
        <view class="pop-title">资料格式化</view>
        <view class="pop-desc">请注意，继续此操作将会清除所有当前的个人设置、历史数据记录及设备配对信息，且无法恢复。若您不希望丢失这些信息，请选择取消。如果确认继续，请选择确认操作。</view>
        <button class="pop-btn u-f-ajc" @click="show = false">取消</button>
				<view class="pop-btn-cancel" @click="onFormat">继续操作</view>
      </view>
    </tn-popup>
		
		<tn-popup v-model="showRest" mode="bottom" borderRadius="50">
      <view class="pop-modal">
        <view class="pop-title">恢复出厂设置</view>
        <view class="pop-desc">请注意，继续此操作将会清除所有当前的个人设置、历史数据记录及设备配对信息，且无法恢复。若您不希望丢失这些信息，请选择取消。如果确认继续，请选择确认操作。</view>
        <button class="pop-btn u-f-ajc" @click="showRest = false">取消</button>
				<view class="pop-btn-cancel" @click="onReset">继续操作</view>
      </view>
    </tn-popup>

		<tn-popup v-model="showRestTwo" mode="center" borderRadius="50">
      <view class="pop-modal2 u-f-ac">
        <view class="pop-title" style="text-align: center;width: 100%;">恢复出厂设置</view>
        <view class="pop-desc">请注意，您正在进行恢复出厂设置操作。这样做您将清除所有所有当前的个人设置，是否继续？</view>
        <button class="pop-btn u-f-ajc" @click="showRestTwo = false">取消</button>
				<view class="pop-btn-cancel" @click="showRestTwo=false">确认</view>
      </view>
    </tn-popup>
		<tn-popup v-model="showTwo" mode="center" borderRadius="50">
      <view class="pop-modal2 u-f-ac">
        <view class="pop-title" style="text-align: center;width: 100%;">格式化</view>
        <view class="pop-desc">请注意，您正在进行格式化操作。这样做您将清除所有的数据，是否继续？</view>
        <button class="pop-btn u-f-ajc" @click="showTwo = false">取消</button>
				<view class="pop-btn-cancel" @click="showTwo=false">确认</view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
import Cell from '../component/cell.vue'
export default {
  components: {
    Cell
	},
	data() {
		return {
			show: false,
			showTwo: false,

			showRest: false,
			showRestTwo: false,
			type: ''
		}
	},
  methods: {
		onLang() {
			uni.navigateTo({
				url: '/pages/user/language'
			})
		},
		onFormat() {
			this.show = false
			this.showTwo = true
		},
		onReset() {
			this.showRest = false
			this.showRestTwo = true
		}
  }
}
</script>

<style scoped>
.pop-btn-cancel{
	margin-top: 50rpx;
	color: #999;
	font-size: 28rpx;
}
.pop-modal2{
	background: #fff;
  border-radius: 20rpx;
  padding: 48rpx 36rpx 40rpx 36rpx;
  box-sizing: border-box;
  width: 900vw;
  height: 300px;
  max-width: 600rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pop-modal {
  background: #fff;
  border-radius: 20rpx;
  padding: 48rpx 36rpx 40rpx 36rpx;
  box-sizing: border-box;
  width: 100vw;
  height: 380px;
  max-width: 700rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pop-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  color: #111;
  align-self: flex-start;
}
.pop-desc {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 70rpx;
  align-self: flex-start;
  line-height: 1.7;
}
.pop-btn {
  width: 100%;
  height: 88rpx;
  background: #000;
  color: #fff;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  margin-top: 20rpx;
}

</style>
